<template>
    <!-- 页面的根视图元素 -->
    <view class="">
        <!-- 轮播图组件 -->
        <swiper style="height: 200px;" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
            <!-- 使用 v-for 遍历 lunboList 数组，为每个元素创建一个轮播项 -->
            <swiper-item v-for="(item,index) in lunboList">
                <view class="swiper-item">
                    <!-- 显示轮播图的图片，图片源通过 :src 绑定 item.url -->
                    <image :src="item.url" mode="" style="width: 100%;"></image>
                </view>
            </swiper-item>
        </swiper>
        <!-- 和风天气信息显示区域 -->
        <view class="weather"
            style="height: 100rpx;border: 1px solid #ccc;margin: 5px; border-radius: 5px;display: flex;justify-content: space-between; padding: 10rpx;align-items: center;">
            <!-- 天气图标 -->
            <view class="icon" style="width: 100rpx;height: 100rpx; ">
                <image style="width: 100%;height: 100%;" :src="'/static/weather/icons/'+ weatherNow.icon +'.svg'"
                    mode=""></image>
            </view>
            <!-- 当前温度显示 -->
            <view class="text" style="font-size: 50rpx;margin-left: 10px;">
                {{weatherNow.temp}}°C
            </view>
            <!-- 天气描述显示 -->
            <view class="text" style="font-size: 34rpx;margin-left: 10rpx;">
                {{weatherNow.text}}
            </view>
            <!-- 风向和风力等级显示 -->
            <view class="text" style=" margin-left: 10rpx;">
                {{weatherNow.windDir}} {{weatherNow.windScale}}级
            </view>
            <view>
                <!-- 体感温度显示 -->
                <view class="text" style="margin-left: 10rpx;">
                    体感温度： {{weatherNow.feelsLike }}°C
                </view>
                <!-- 湿度显示 -->
                <view class="text" style="margin-left: 10rpx;">
                    湿度： {{weatherNow.humidity }}%
                </view>
            </view>
        </view>
        <!-- 分类栏 -->
        <view class="">
            <!-- 分类标题 -->
            <uni-section title="分类图标栏" type="line" titleFontSize="18px" padding>
                <!-- 网格布局，使用 uni-grid 组件 -->
                <uni-grid :show-border="false" :column="5" @change="changeGrid">
                    <!-- 遍历 gridData 数组，为每个元素创建一个网格项 -->
                    <uni-grid-item v-for="(item,index) in gridData" :index="index">
                        <view class="grid-item-box" style="background-color: #fff;">
                            <!-- 显示分类图标 -->
                            <uni-icons :type="item.icon" :size="30" color="#fe0067" />
                            <!-- 显示分类标题 -->
                            <text class="grid-item-text">{{item.title}}</text>
                        </view>
                    </uni-grid-item>
                </uni-grid>
            </uni-section>
        </view>
        <!-- 搜索栏 -->
        <uni-section title="公共交通栏搜索" type="line" titleFontSize="18px" padding />
        <view class="search-box">
            <!-- 搜索框组件，绑定 searchKey 并监听 confirm 事件 -->
            <uni-search-bar @confirm="searchCityBus" v-model="searchKey" />
        </view>
        <!-- 按钮，点击触发 showme 方法 -->
        <button class="btn" type="default" @tap="showme">我在哪里？</button>
        <!-- 推荐栏 -->
        <uni-section title="景点推荐" type="line" titleFontSize="18px" padding />
        <view class="item_tab">
            <!-- 遍历 Chinaitmes 数组，为每个元素创建一个推荐项 -->
            <view class="item" v-for="(item,index) in Chinaitmes" @tap="toDetails(item.objectId)">
                <view class="pic">
                    <!-- 显示推荐景点的图片 -->
                    <image :src="item.img" mode="" style="width: 300rpx; height: 350rpx;"></image>
                </view>
                <view class="msg" style="width: 500rpx;">
                    <!-- 显示推荐景点的名称 -->
                    <view class="title">{{item.name}}</view>
                    <!-- 显示推荐景点的简介 -->
                    <view class="intro">{{item.intro}}</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
    // 从 Vue 导入 ref 函数
    import { ref } from 'vue'
    // 从 uni-app 导入 onLoad 函数
    import { onLoad } from '@dcloudio/uni-app'
    // 导入自定义的配置文件
    import { CONFIG } from '../../utils/config.js'
    // 导入用户状态库
    import { userStore } from '../../store/userStore.js'
    // 创建用户状态存储实例
    let store = userStore()
    // 在页面加载时调用多个初始化函数
    onLoad(() => {
        getLunbo() // 轮播图
        getWeather() // 和风天气
        searchCityBus() // 高德地图
        getPos() // 获取当前坐标
        getXianPost("1") // 获取推荐景点
    })
    // 存储轮播图数据的响应式数组
    let lunboList = ref([])
    // 获取轮播图数据的异步函数
    async function getLunbo() {
        // 发起 GET 请求获取轮播图数据
        let res = await uni.$get(CONFIG.leancloud_url + "/1.1/classes/lunbo")
        // 处理返回结果，对 url 进行修剪
        lunboList.value = res.results.map(item => {
            item.url = item.url.trim()
            return item
        })
        console.log(lunboList.value)
    }
    // 存储当前天气信息的响应式对象
    let weatherNow = ref({})
    // 获取和风天气信息的异步函数
    async function getWeather() {
        // 发起 GET 请求获取天气信息
        let res = await uni.$get(CONFIG.hefeng_now, {
            key: CONFIG.hefeng_key,
            location: CONFIG.hefeng_location
        })
        if (res.code == 200) {
            // 将获取到的天气信息存储在 weatherNow 中
            weatherNow.value = res.now
            console.log(res.now)
        }
    }
    // 存储搜索关键字的响应式变量
    let searchKey = ref("")
    // 搜索城市公交的函数
    function searchCityBus() {
        if (searchKey.value == "") {
            // 显示提示信息，如果搜索关键字为空
            uni.showToast({
                title: "请输入搜素名称",
                icon: "none"
            })
        } else {
            // 构造搜索 URL 并在浏览器中打开
            let url = `https://uri.amap.com/line?name=${searchKey.value}&city=010&callnative=0`
            window.location.href = url
        }
    }
    // 分类数据数组
    let gridData = [{
            title: '热映电影',
            icon: 'videocam'
        },
        {
            title: '地理位置',
            icon: 'location'
        },
        {
            title: 'Ai助手',
            icon: 'search'
        },
        {
            title: '天气预报',
            icon: 'notification'
        },
        {
            title: '景点',
            icon: 'camera-filled'
        }
    ]
    // 获取当前位置的函数
    function getPos() {
        // 调用 uni 提供的 getLocation 方法获取位置信息
        uni.getLocation({
            success(res) {
                console.log(res)
                // 将位置信息存储在用户状态存储中
                store.setPos(res.latitude, res.longitude)
            }
        })
    }
    // 存储推荐景点数据的响应式数组
    let Chinaitmes = ref([])
    // 获取推荐景点的异步函数
    async function getXianPost(type) {
        // 构造请求数据
        let data = {
            "type": type
        }
        // 对请求数据进行编码
        let ed = encodeURI(JSON.stringify(data))
        // 发起 GET 请求获取推荐景点信息
        let res = await uni.$get(CONFIG.leancloud_url + "/1.1/classes/ChinaPlayItem?where=" + ed)
        Chinaitmes.value = res.results
        console.log(res)
    }
    // 跳转到景点详情页面的函数
    function toDetails(id) {
        uni.navigateTo({
            url: "/pages/playinChinaDetails/playinChinaDetails?id=" + id
        })
    }
    // 跳转到查看自己所在位置页面的函数
    function showme() {
        uni.navigateTo({
            url: "/pages/mywebView/mywebView?type=1"
        })
    }
</script>

<style>
   .grid-item-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
    }
    /* 标题样式 */
   .title {
        text-align: center;
        color: royalblue;
        border: 1px solid #ccc;
        border-radius: 5rpx;
        box-shadow: 3px 3px 3px #eee;
        margin: 10rpx;
        padding: 10rpx;
    }
    /* 介绍样式 */
   .intro {
        /* 首行缩进 1 个字符 */
        text-indent: 1em;
        padding: 0 15rpx 0 15rpx;
        font-size: 30rpx;
        color: #666;
        overflow: hidden;
        /* 最多显示 5 行 */
        -webkit-line-clamp: 5;
        /* 超出部分显示省略号 */
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
    }
   .search-box {
        border: 1px solid grey;
    }
   .item_tab {
        width: 100%;
        border: 1px solid #eee;
        box-shadow: 3px 3px 3px #eee;
        border-radius: 10px;
        margin-bottom: 5px;
    }
   .item_tab>.item {
        display: flex;
        border: 1px solid gray;
        border-radius: 5px;
        height: 390rpx;
        margin-top: 10px;
    }
   .item_tab>.item>.pic {
        width: 320rpx;
        height: 320rpx;
        border: 1px solid #ccc;
        margin: 15rpx;
    }
   .pic>image {
        width: 320rpx;
        height: 320rpx;
    }
   .btn {
        color: white;
        /* 按钮文本颜色 */
        background-color: gray;
        /* 按钮的背景颜色 */
    }
</style>